<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加回复-关键词回复</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="../js/vue.js"></script>
  <script src="../js/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <!-- 引入对应模块的css -->
  <link rel="stylesheet" href="../css/addReply.css">
  <link rel="stylesheet" href="../js/jQuery-emoji/lib/css/jquery.mCustomScrollbar.min.css">
  <link rel="stylesheet" href="../js/jQuery-emoji/src/css/jquery.emoji.css">
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <top-bar ref="topbar"></top-bar>
        <!-- 开始 -->
        <div class="displayCenter">
            <!-- 左边导航 -->
            <div class="leftBox"> <left-site :pagetype="pagetype"></left-site></div>
            <div class="pageContent fffBackground" style=" padding:0 20px;">
               <section class="weizhi">您当前所在的位置：站点设置>关注时回复>添加回复</section>
               <section class="ruleName">

                规则名称: <input placeholder="请输入规则名称" v-model="ruleName1" @input="ruleNameIn"/> <span>{{ruleNameLen}}/14</span>
               </section>

               
               <section class="fansType">

                性别:   <select><option>全部</option> <option>男</option><option>女</option></select>
                语言:   <select> <option>全部</option><option>汉语</option></select>
                地区:   <select> <option>上海</option><option>北京</option></select>
               </section>

               <section class="keywordsPart">
                    关键词： <select><option>半匹配</option> <option>全匹配</option></select>
                    <div class="posBox">
                        <input type="text" placeholder="请输入关键词" v-model="keywordsInput1" maxlength="30" @input="keywordsIn" />
                        <span>{{keywordsInputLen}}/30</span>
                    </div>
                    <img src="../img/keywordsClose.png"> <a>添加关键词</a>
                    <span class="error-span">※ 关键词不能为空且最多30个字</span>
    
               </section>

               <section class="addBox">
                        <div class="createdGroup-row">

                            <span class="row-left">回复方式:</span>
                            <label for="radio-1"><input id="radio-1" name="radio" type="radio"/>全部回复 <span class="xuniRadio"></span> </label>   
                            <label for="radio-2"><input id="radio-2" name="radio" type="radio"/>随机回复一条<span class="xuniRadio"></span> </label>                               
                        </div>


                        <div class="createdGroup-row">
                            <span class="row-left" style="vertical-align: top;">回复内容:</span>
                            <div class="imgAndPOI">
                                <section class="imgAndPOI-box">
                                    <img class="box-bannerImg" src="../img/u372.png"/>
                                    <div class="positionTital">图文标题</div>
                                   <ul class="imgAndPOI-cont">
                                        <li class="displayBetween">
                                            <p>文章同步成功后，请登录微信公众号后台</p>
                                            <div><img src="../img/u383.png" /></div>
                                            
                                        </li>
                                        <li class="displayBetween">
                                            <p>文章同步成功后，请登录微信公众号后台</p>
                                            <div><img src="../img/u383.png" /></div>
                                                
                                        </li>
                                        <li class="displayBetween">
                                            <p>文章同步成功后，请登录微信公众号后台</p>
                                            <div><img src="../img/u383.png" /></div>       
                                        </li>
                                        <li class="displayBetween">
                                            <p>文章同步成功后，请登录微信公众号后台</p>
                                            <div><img src="../img/u383.png" /></div>       
                                        </li>
                                   </ul>
                                </section>
                                <section class="operation-box">
                                    <span>回复类型:图文</span> 
                                    <p> <img src="../img/deleteBtn.png"> 删除</p>
                                    <p @click="showWrapDialog('tuwen')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                </section>
                                <div class="bottom-line"></div>
                            </div>

            
                        </div>
                        <div class="createdGroup-row">
                            <span class="row-left" style="vertical-align: top;"></span>
                            
                            <div class="textType">
                                <h3>回复类型：文本 <span> <img src="../img/deleteBtn.png"> 删除</span> 
                                    <span @click="showWrapDialog('wenzi')"> <img src="../img/tihuanBtn.png"> 替换</span> 
                                </h3>
                                <section class="textType-content">
                                    <p>族蚂网提供抖音在线教学服务，周一至周五晚8点开播！（法定节假日延后）诚邀您关注族蚂网抖音号：zumawang</p>
                                    <div>族蚂官网：zuma.com </div>
                                    <div>建站教学：​zuma.com</div>
                                </section>
                                <div class="bottom-line"></div>
                            </div>
                            
                        </div>
                        <div class="createdGroup-row">
                            <span class="row-left" style="vertical-align: top;"></span>
                            <div class="imgAndPOI">
                                <section class="imgAndPOI-box">
                                    <img class="box-bannerImg" src="../img/u497.png"/>
                                    <div class="box-imgName">图片名称</div>
                                </section>
                                <section class="operation-box">
                                    <span>回复类型:图片</span> 
                                    <p> <img src="../img/deleteBtn.png"> 删除</p>
                                    <p @click="showWrapDialog('tupian')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                </section>
                                <div class="bottom-line"></div>
                            </div>
                            
                            
                        </div>

                        <div class="createdGroup-row">
                                <span class="row-left" style="vertical-align: top;"></span>
                                <div class="yinpinContent">
                                    <section class="yinpinPart">
                                            <section class="yinpinPart-top displayBetween">                                                                                                                                                                                                    
                                                <div class="displayBetween">                                                                                                                                                                                                                   
                                                    <section class="yinpinPart-imgBox"><img src="../img/yinpinDialog1.png" /></section>                                                                                                                                                        
                                                    <section style="overflow:hidden;max-width:90px;white-space:nowrap;text-overflow:ellipsis;">                                                                                                                                               
                                                        <p>音频名称</p>                                                                                                                                                                                                                     
                                                        <p style="margin-top:20px;color:#AEAEAE;">20.00MB</p>                                                                                                                                                                             
                                                    </section>                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                           
                                                </div>                                                                                                                                                                                                                                          
                                                <div style="color:#AEAEAE;">                                                                                                                                                                                                                   
                                                        05:16                                                                                                                                                                                                                       
                                                </div>                                                                                                                                                                                                                                         
                                            </section>                                                                                                                                                                                                                                          
                                             <section class="yinpinPart-bottom displayBetween" style="line-height:40px;">                                                                                                                                                                        
                                                <div> 更新时间:2019.1.2</div> <div> </div>                                                                                             
                                            </section>    
                                    </section>
                                    <section class="operation-box">
                                        <span>回复类型:音频</span> 
                                        <p> <img src="../img/deleteBtn.png"> 删除</p>
                                        <p @click="showWrapDialog('yinpin')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                    </section>
                                    <div class="bottom-line"></div>
                                </div>
                                
                                
                        </div>
                        <div class="createdGroup-row">
                                <span class="row-left" style="vertical-align: top;"></span>
                                <div class="shipinContent">
                                    <section class="shipinPart">
                                            <section class="shipinBanner-box">
                                                    <img src="../img/shipinDialog1.png" />
                                            </section>  
                                            <section class="displayBetween shipin-des" style="line-height:25px; padding:0 10px">
                                                <div>视频名称</div> <div style="color:#aeaeae">50MB</div>
                                            </section>   
                                            <section class="displayBetween shipin-updateTime" style="line-height:35px;padding:0 10px"> 
                                                <div style="color:#797979">更新时间:2019.1.4</div> <div></div>    
                                            </section>        
                                    </section>
                                    <section class="operation-box">
                                        <span>回复类型:视频</span> 
                                        <p> <img src="../img/deleteBtn.png"> 删除</p>
                                        <p @click="showWrapDialog('shipin')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                    </section>
                                    <div class="bottom-line"></div>
                                </div>
                                
                                
                        </div>
                        <div class="createdGroup-row">
                            <span class="row-left" style="vertical-align: top;"></span>
                            <div class="POIPart">
                                    <section class=" displayBetween">                                                                                                                                                                                                                    
                                        <div>                                                                                                                                                                                                                                               
                                            <img src="../img/POIdialog.png"/>                                                                                                                                                                                                                       
                                        </div>                                                                                                                                                                                                                                              
                                        <div class="POI-des">                                                                                                                                                                                                                               
                                            <h3 style="color:#333333;line-height:26px" class="ellipsis1">族蚂科技</h3>                                                                                                                                                                  
                                            <p  style="color:#333333;line-height:30px" class="des-address ellipsis1"> 上海市金山区林盛路136号祖玛科技</p>                                                                                                                                                    
                                            <p  style="color:#333333;line-height:30px" class="des-phone"> 222222222222</p>                                                                                                                                                                  
                                            <p  style="color:#797979;line-height:30px" class="des-updateTime">更新时间: 86978654 </p>                                                                                                                                              
                                        </div>                                                                                                                                                                                                                                              
                                    </section>  
                                   
                            </div>
                            <section class="operation-box">
                                    <span>回复类型:POI</span> 
                                    <p> <img src="../img/deleteBtn.png"> 删除</p>
                                    <p @click="showWrapDialog('POI')"> <img src="../img/tihuanBtn.png"> 替换</p>
                            </section>
                            <div class="bottom-line"></div>
                        </div>

                        <div class="createdGroup-row">
                                <span class="row-left">回复内容: </span>
                                <div class="newCreate">
                                    <span class="newCreateBtn" @click="newCreateBtn">新增回复</span>
                                     <div class="tabBtns" v-if="tabBtnsShow">
                                        <img class="bgImg" src="../img/u516.png"/>
                                        <div class="posBtn">
                                            <span @click="showWrapDialog('wenzi')"><img src="../img/wenzi.png" /> 文字</span>
                                            <span @click="showWrapDialog('tupian')"> <img src="../img/tupian.png" > 图片</span>
                                            <span @click="showWrapDialog('yinpin')"> <img src="../img/yinpin.png" > 音频</span>
                                            <span @click="showWrapDialog('shipin')"> <img src="../img/shipin.png" > 视频</span>
                                            <span @click="showWrapDialog('tuwen')"> <img src="../img/tuwenxiaoxi.png" > 图文消息</span>
                                            <span @click="showWrapDialog('POI')"> <img src="../img/POI.png" > POI</span>
                                        </div>
                                           
                                    </div>
                                  
                                </div>
                                    
                        </div>
                        <div class="createdGroup-row">
                                <section class="submitBtn">
                                    <span >取消</span> <span class="activeBtn">保存</span>
                                </section>
                                
                        </div>
               </section>
            </div>
        </div>
        <section class="commonMarsk" v-if="dialogShow">
                <tip-dialog ref="tipDialog" :dialogdata='dialogdata'  @close="closeDialog" :leftbtnhandler="leftBtnHandler" :rightbtnhandler="rightBtnHandler"></tip-dialog>
        </section>
        <wrap-dialog v-if="wrapDialogShow" @close-wrap-dialog-handel="closeWrapDialog" :dialogtype="dialogtype"></wrap-dialog>
   </div>   


</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>
<!-- 提示弹窗 -->
<script src="../common/dialog.js"></script>
<!-- 素材弹框 -->
<script src="../common/wrap-dialog.js"></script>
<script src="../js/public.js"></script>

<script type="text/javascript" src="../js/jQuery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/src/js/jquery.emoji.js"></script>
<script>
    
    new Vue({
        el: '#app',
        data: {
          dialogdata: null,
          dialogShow:false,
          pagetype:'zidonghuifu',
          wrapDialogShow:false,//是否显示wrapDialog
          dialogtype:'',//选择的是什么类型弹框
          tabBtnsShow:false,
          keywordsInput1:'',
          keywordsInputLen:0,
          keywordsInput2:'',
          ruleName1:'',
          ruleName2:'',
          ruleNameLen:0,
        },
        created:function() {
            //public.ceshi()
        },
        mounted:function() {
            //this.$refs['topbar'].ce();
           
        },
        methods: {
            ruleNameIn:function(){
               let len =  this.gblen(this.ruleName1)
               this.ruleNameLen = len
               if(len<14){
                   this.ruleName2 = this.ruleName1;
               }else{
                   this.ruleName1 = this.ruleName2;
               }
            },
            keywordsIn:function(){
               let len =  this.gblen(this.keywordsInput1)
               this.keywordsInputLen = len
               if(len<30){
                   this.keywordsInput2 = this.keywordsInput1;
               }else{
                   this.keywordsInput1 = this.keywordsInput2;
               }
            },
            gblen:function(str) {   
                var len = 0;
                for (var i = 0; i < str.length; i++) {
                    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
                        len += 2;
                    } else {
                        len++;
                    }
                }
                return len;
            },
            showWrapDialog:function(type){
                this.wrapDialogShow = true;
                this.dialogtype = type;
             },
             closeWrapDialog:function(){
                 
                 this.wrapDialogShow = false;
             },
             newCreateBtn:function() {
                this.dialogdata={
                    content:'免费版可添加1条关注回复，如需回复多条请升级套餐版本！',
                    btnLeft:'取消',
                    btnRight:'马上升级'
                }
                  this.dialogShow = true;
                  this.tabBtnsShow = true;
              },
              unBind:function(){//打开提示弹框
                  this.dialogdata={
                    content:'请前往微信公众平台取消授权。',
                    btnLeft:'好的',
                    btnRight:'查看教程'
                  }
                  this.dialogShow = true;
                  console.log(this.dialogdata,'dd')
                  //this.$refs['tipDialog'].isShow = true;
              },
              closeDialog:function(v){//关闭弹框
                
                    this.dialogShow = v;
              },
              leftBtnHandler:function(){//左边按钮的事件方法
                this.dialogShow = false;
                  alert('左边按钮的触发事件')
              },
              rightBtnHandler:function() {//左边按钮的事件方法
                 alert('右边边按钮的触发事件')
              }
        },
    })
</script>

</html>